<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/animate.min.css">
<link rel="stylesheet" href="./css/swiper4.min.css">
<link rel="stylesheet" href="./css/loushu.css">
<link rel="stylesheet" href="./css/yg.css">
<script src="./js/rem.js"></script>
<script src="./js/jquery.min.js"></script>
<title>垃圾分类小便士</title>
<style>
</style>
</head>
<body>
	<div class="yg-loushu">
		<!-- 背景图 -->
		<div class="quwei-bg">
			<img src="images/loushu/bg.png" alt="">
		</div>
		<div class="p-swiper1 swiper-container">
			<div class="swiper-wrapper">
				<!-- p1 -->
				<div class="swiper-slide">
					<img src="images/loushu/p.png" alt="" class="pp bg-scale">
					<img
						src="images/loushu/p1-1.png" 
						class="p_view p1_1 ani resize" 
						swiper-animate-effect="fadeInDown" 
						swiper-animate-duration="2s" 
						swiper-animate-delay="0s" 
					>
					<div class="pp-content p1-box">
						<img
							src="images/loushu/p1-2.jpg" 
							class="p_view p1_2 img_border ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="0.5s" 
						>
						<img
							src="images/loushu/p1-t1.png" 
							class="p_view p1_t p1_t1 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="1.2s" 
						>
						<img
							src="images/loushu/p1-t2.png" 
							class="p_view p1_t p1_t2 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="1.8s" 
						>
						<img
							src="images/loushu/p1-t3.png" 
							class="p_view p1_t p1_t3 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="2.4s" 
						>
						<img
							src="images/loushu/p1-t4.png" 
							class="p_view p1_t p1_t4 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="3s" 
						>
						<img
							src="images/loushu/p1-t5.png" 
							class="p_view p1_t p1_t5 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="3.6s" 
						>
						<img
							src="images/loushu/p1-t6.png" 
							class="p_view p1_t p1_t6 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="4.2s" 
						>
					</div>
				</div>
				
				<!-- p2 -->
				<div class="swiper-slide">
					<img src="images/loushu/p.png" alt="" class="pp bg-scale">
					<img
						src="images/loushu/p2-1.png" 
						class="p_view p1_1 ani resize" 
						swiper-animate-effect="fadeInDown" 
						swiper-animate-duration="2s" 
						swiper-animate-delay="0s" 
					>
					<div class="pp-content p2-box">
						<img
							src="images/loushu/p2-2.png" 
							class="p_view p1_2 ani resize" 
							swiper-animate-effect="fadeInRight" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="0.5s" 
						>
						<img
							src="images/loushu/p2-t1.png" 
							class="p_view p1_t p2_t1 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="1.2s" 
						>
						<img
							src="images/loushu/p2-t2.png" 
							class="p_view p1_t p2_t2 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="1.8s" 
						>
						<!-- 垃圾 -->
						<img
							src="images/loushu/p2-w1.png" 
							class="p_view p2_w p2_w1 ani resize" 
							swiper-animate-effect="fadeInLeft" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="2.4s" 
						>
						<img
							src="images/loushu/p2-w2.png" 
							class="p_view p2_w p2_w2 ani resize" 
							swiper-animate-effect="fadeInDown" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="2.8s" 
						>
						<img
							src="images/loushu/p2-w3.png" 
							class="p_view p2_w p2_w3 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="3.2s" 
						>
						<img
							src="images/loushu/p2-w4.png" 
							class="p_view p2_w p2_w4 ani resize" 
							swiper-animate-effect="fadeInDown" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="3.6s" 
						>
						<img
							src="images/loushu/p2-w5.png" 
							class="p_view p2_w p2_w5 ani resize" 
							swiper-animate-effect="fadeInRight" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="4s" 
						>
					</div>
				</div>
				
				<!-- p3 -->
				<div class="swiper-slide">
					<img src="images/loushu/p.png" alt="" class="pp bg-scale">
					<img
						src="images/loushu/p3-1.png" 
						class="p_view p1_1 ani resize" 
						swiper-animate-effect="fadeInDown" 
						swiper-animate-duration="2s" 
						swiper-animate-delay="0s" 
					>
					<div class="pp-content p3-box">
						<img
							src="images/loushu/p3-2.png" 
							class="p_view p3_2 ani resize" 
							swiper-animate-effect="fadeInLeft" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="0.5s" 
						>
						<img
							src="images/loushu/p3-t1.png" 
							class="p_view p3_t p2_t1 ani resize" 
							swiper-animate-effect="fadeInDown" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="1.2s" 
						>
						<img
							src="images/loushu/p3-t2.png" 
							class="p_view p3_t p2_t2 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="1.8s" 
						>
						<!-- 垃圾 -->
						<img
							src="images/loushu/p3-w1.png" 
							class="p_view p3_w p3_w1 ani resize" 
							swiper-animate-effect="fadeInLeft" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="2.4s" 
						>
						<img
							src="images/loushu/p3-w2.png" 
							class="p_view p3_w p3_w2 ani resize" 
							swiper-animate-effect="fadeInDown" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="2.8s" 
						>
						<img
							src="images/loushu/p3-w3.png" 
							class="p_view p3_w p3_w3 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="3.2s" 
						>
						<img
							src="images/loushu/p3-w4.png" 
							class="p_view p3_w p3_w4 ani resize" 
							swiper-animate-effect="fadeInDown" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="3.6s" 
						>
						<img
							src="images/loushu/p3-w5.png" 
							class="p_view p3_w p3_w5 ani resize" 
							swiper-animate-effect="fadeInRight" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="4s" 
						>
						<img
							src="images/loushu/p3-w6.png" 
							class="p_view p3_w p3_w6 ani resize" 
							swiper-animate-effect="fadeInRight" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="4.4s" 
						>
					</div>
				</div>
				
				<!-- p4 -->
				<div class="swiper-slide">
					<img src="images/loushu/p.png" alt="" class="pp bg-scale">
					<img
						src="images/loushu/p4-1.png" 
						class="p_view p1_1 ani resize" 
						swiper-animate-effect="fadeInDown" 
						swiper-animate-duration="2s" 
						swiper-animate-delay="0s" 
					>
					<div class="pp-content p4-box">
						<img
							src="images/loushu/p4-2.png" 
							class="p_view p1_2 ani resize" 
							swiper-animate-effect="fadeInRight" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="0.5s" 
						>
						<img
							src="images/loushu/p4-t1.png" 
							class="p_view p3_t p2_t1 ani resize" 
							swiper-animate-effect="fadeInDown" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="1.2s" 
						>
						<img
							src="images/loushu/p4-t2.png" 
							class="p_view p3_t p2_t2 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="1.8s" 
						>
						<!-- 垃圾 -->
						<img
							src="images/loushu/p4-w1.png" 
							class="p_view p3_w p4_w1 ani resize" 
							swiper-animate-effect="fadeInLeft" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="2.4s" 
						>
						<img
							src="images/loushu/p4-w2.png" 
							class="p_view p3_w p4_w2 ani resize" 
							swiper-animate-effect="fadeInDown" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="2.8s" 
						>
						<img
							src="images/loushu/p4-w3.png" 
							class="p_view p3_w p4_w3 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="3.2s" 
						>
						<img
							src="images/loushu/p4-w4.png" 
							class="p_view p3_w p4_w4 ani resize" 
							swiper-animate-effect="fadeInDown" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="3.6s" 
						>
					</div>
				</div>
				
				<!-- p5 -->
				<div class="swiper-slide">
					<img src="images/loushu/p.png" alt="" class="pp bg-scale">
					<img
						src="images/loushu/p5-1.png" 
						class="p_view p1_1 ani resize" 
						swiper-animate-effect="fadeInDown" 
						swiper-animate-duration="2s" 
						swiper-animate-delay="0s" 
					>
					<div class="pp-content p5-box">
						<img
							src="images/loushu/p5-2.png" 
							class="p_view p3_2 ani resize" 
							swiper-animate-effect="fadeInLeft" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="0.5s" 
						>
						<img
							src="images/loushu/p5-t1.png" 
							class="p_view p3_t p5_t1 p2_t1 ani resize" 
							swiper-animate-effect="fadeInDown" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="1.2s" 
						>
						<img
							src="images/loushu/p5-t2.png" 
							class="p_view p3_t p2_t2 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="1.8s" 
						>
						<!-- 垃圾 -->
						<img
							src="images/loushu/p5-w1.png" 
							class="p_view p3_w p4_w1 ani resize" 
							swiper-animate-effect="fadeInLeft" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="2.4s" 
						>
						<img
							src="images/loushu/p5-w2.png" 
							class="p_view p3_w p5_w2 ani resize" 
							swiper-animate-effect="fadeInDown" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="2.8s" 
						>
						<img
							src="images/loushu/p5-w3.png" 
							class="p_view p3_w p5_w3 ani resize" 
							swiper-animate-effect="fadeInUp" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="3.2s" 
						>
						<img
							src="images/loushu/p5-w4.png" 
							class="p_view p3_w p5_w4 ani resize" 
							swiper-animate-effect="fadeInDown" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="3.6s" 
						>
						<img
							src="images/loushu/p5-w5.png" 
							class="p_view p3_w p5_w5 ani resize" 
							swiper-animate-effect="fadeInRight" 
							swiper-animate-duration="1s" 
							swiper-animate-delay="4s" 
						>
					</div>
				</div>
				
			</div>
		</div>
		
		<!-- 提示滑动 -->
		<div class="roll-tip">
			<img src="./images/arrow.png">
		</div>
	</div>
</body>
<script src="./js/swiper4.min.js"></script>
<script src="./js/swiper.animate.min.js"></script>
<script>
	// swiper 点击事件swiper.slideTo(2) 切换到页面3(下标0开始)
	var swiper = new Swiper('.p-swiper1', {
	  direction: 'vertical',
		// initialSlide: 4, 
		speed: 500,
		onInit: function(swiper){
			swiperAnimateCache(swiper);
			swiperAnimate(swiper);
		},
		onSlideChangeEnd: function(swiper){
			console.log(swiper.activeIndex);
			swiperAnimate(swiper);
			if(swiper.activeIndex >= 4){
				$('.roll-tip').hide();
			} else {
				$('.roll-tip').show();
			}
		},
		onTransitionEnd: function(swiper){
			swiperAnimate(swiper);
		},
	});
</script>
</html>
